<template>
<div>

  <div class="chain-link-bar-wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      <el-breadcrumb-item to="/activity">活动列表</el-breadcrumb-item>
      <el-breadcrumb-item :to="'/activity/detail/' + activity.id">详情：{{activity.title}}</el-breadcrumb-item>
    </el-breadcrumb>  
  </div>

  <el-card class="box-card">
    
    <div slot="header" class="clearfix">
      <h3 class="app-h3 app-margin-v-0">
        活动详情
      </h3>
    </div>

    <div class="app-diliver-10"></div>
    
    <el-row :gutter="80">
      <el-col :span="12">
        
        <el-row>
          <el-col :span="24">
            <h4 class="app-h4 app-margin-v-0">活动信息</h4>
          </el-col>
        </el-row>

        <div class="app-diliver-10"></div>

        <el-row class="app-section">
          
          <el-col :span="3">
            <span class="app-label">活动标题：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{activity.title}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">活动代号：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{activity.tag}}&nbsp;</span>
          </el-col>
          
          <el-col :span="3">
            <span class="app-label">详细内容：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{activity.content}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">最大人数：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text"><!--{{activity.people_min_number}} ~--> {{activity.people_max_number}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">活动时间：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{activity.start_date_time}} ~ {{activity.end_date_time}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">活动地址：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">
              {{activity.province}}&nbsp;{{activity.city}}&nbsp;{{activity.area}}&nbsp;
              {{activity.address}}&nbsp;
            </span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">封面图片：</span>
          </el-col>
          <el-col :span="20">
            <el-image :preview-src-list="activity.coverImgList" class="section-img-200" v-for="img in activity.coverImgList" :src="img" />
            &nbsp;
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="24">
            <h4 class="app-h4 app-margin-b-0">活动状态</h4>
          </el-col>
        </el-row>

        <div class="app-diliver-10"></div>

        <el-row class="app-section">
          <el-col :span="3">
            <span class="app-label">活动状态：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-label">
              <el-button v-if="activity.activity_status == 'BE'" size="mini">未开始&nbsp;</el-button>
              <el-button v-if="activity.activity_status == 'ING'" type="warning" size="mini">进行中&nbsp;</el-button>
              <el-button v-if="activity.activity_status == 'END'" type="success" size="mini">结束&nbsp;</el-button>
              <el-button v-if="activity.activity_status == 'CANCEL'" type="danger" size="mini">取消&nbsp;</el-button>
              &nbsp;
            </span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">取消说明：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{activity.activty_cancel_explain}}&nbsp;</span>
          </el-col>
          <el-col :span="3">
            <span class="app-label">取消时间：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{activity.activity_cancel_date_time}}&nbsp;</span>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="12">
        <el-row>
          <el-col :span="24">
            <h4 class="app-h4 app-margin-v-0">审核状态</h4>
          </el-col>
        </el-row>

        <div class="app-diliver-10"></div>
        
        <el-row class="app-section">
          <el-col :span="3">
            <span class="app-label">状态：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">            
              <el-button v-if="activity.check_status == 'NOT'"  size="mini">未审核</el-button>
              <el-button v-if="activity.check_status == 'PASS'" type="success"  size="mini">已通过</el-button>
              <el-button v-if="activity.check_status == 'FAIL'" type="danger"  size="mini">未通过</el-button>&nbsp;
            </span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">审核说明：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{activity.check_status_explain}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">审核时间：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{activity.check_date_time}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">发布时间：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{activity.create_date_time}}&nbsp;</span>
          </el-col>

          <el-col :span="3">
            <span class="app-label">更新时间：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{activity.update_date_time}}&nbsp;</span>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <h4 class="app-h4 app-margin-b-0">个人信息 & 公司信息</h4>
          </el-col>
        </el-row>

        <div class="app-diliver-10"></div>

        <el-row class="app-section">
          <el-col :span="3">
            <span class="app-label">发布人：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{account.last_name + account.first_name}}</span>
          </el-col>
          <el-col :span="3">
            <span class="app-label">手机号：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{account.phone}}</span>
          </el-col>
          <el-col :span="3">
            <span class="app-label">公司名称：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{company.name}}</span>
          </el-col>
          <el-col :span="3">
            <span class="app-label">公司座机：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">{{company.company_tel == '' ? "暂无座机" : company.company_tel}}</span>
          </el-col>
          <el-col :span="3">
            <span class="app-label">公司地址：</span>
          </el-col>
          <el-col :span="20">
            <span class="app-text">
              {{company.address_detail}}&nbsp;
            </span>
          </el-col>
        </el-row>
      </el-col>

    </el-row>
    
    

  </el-card>

</div>
</template>


<script>

  import NcButton from '../common/NcButton'
  import SubmitButton from '../common/SubmitButton'

  import Api from '../../api/Api'
  import ActivityApi from '../../api/ActivityApi'



  export default {
  	components: {
  		NcButton, SubmitButton
  	},
  	data(){
  	  return {
        
        activity: {},
        activityId: 0,
        account: {},
        company: {},
        
  	  }
  	},
  	computed: {
  	  
  	},
  	created(){
  	  this.activityId = this.$route.params.activityId;
      this.getActivity();
  	},
    watch: {
      '$route' (to, from) {
        this.activityId = to.params.activityId;
        this.getActivity();
      }
    },
  	methods: {
      getActivity(){
        ActivityApi.detail(this.activityId, json => {
          this.activity = json.activity;
          this.account = json.activity.account;
          this.company = json.activity.company;
        });
      }
  	}
  }
</script>

